<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        // 无论旋转、缩放、平移，三者都会改变坐标系，画布上的图形的变化都是因为坐标系的变化才随之改变的，所以慎用哦

        /*
            其实和css3中的translate没啥大区别
            有区别的地方就是，css3中的translate传入0，可以返回初始位置，但是这里不行
            这里每一次的translate都是相对于上一次的位置来的。
            比如下面是100,100，你想回到最初起点就要传入-100,-100才行
            而且translate会改变坐标轴原点的位置，以后你绘制图形的坐标都会根据这个坐标来
        */
        // ctx.translate(100, 100);
        // ctx.fillRect(0, 0, 100, 100);

        /*
            缩放: 传入两个参数分别是x方向上的拉伸倍数、y方向上的拉伸倍数
            不过拉伸是连着坐标轴一起拉伸的，比如你把x拉伸了2倍，那么原来50的地方，现在就是100了。
            所以下面的正方形位置你会觉着有偏差。
        */
        // ctx.scale(2, 2)
        // ctx.fillRect(100, 100, 100, 100);

        /*
            旋转: 传入一个角度参数，记得用Math.PI进行计算。老样子0度就是水平向右也就是x轴的起始方向
        */
       ctx.rotate(Math.PI/4);
       ctx.fillRect(0,0,400,100);

    </script>
</body>

</html>